<!-- views/sales/components/CustomerStats.vue -->
<template>
  <el-row :gutter="16" class="stats-row">
    <el-col :xs="24" :sm="6">
      <StatCard
        title="客户总数"
        :value="stats.totalCustomers"
        icon="User"
        color="#1890ff"
        :trend="stats.customerTrend"
      />
    </el-col>
    <el-col :xs="24" :sm="6">
      <StatCard
        title="本月新增"
        :value="stats.newCustomers"
        icon="UserAdd"
        color="#52c41a"
        :trend="stats.newCustomerTrend"
      />
    </el-col>
    <el-col :xs="24" :sm="6">
      <StatCard
        title="活跃客户"
        :value="stats.activeCustomers"
        icon="UserFilled"
        color="#fa8c16"
        :trend="stats.activeCustomerTrend"
      />
    </el-col>
    <el-col :xs="24" :sm="6">
      <StatCard
        title="重要客户"
        :value="stats.keyCustomers"
        icon="Star"
        color="#722ed1"
        :trend="stats.keyCustomerTrend"
      />
    </el-col>
  </el-row>
</template>

<script setup lang="ts">
import { defineProps } from 'vue'
import StatCard from '@/components/StatCard.vue'

interface CustomerStats {
  totalCustomers: number
  newCustomers: number
  activeCustomers: number
  keyCustomers: number
  customerTrend: number
  newCustomerTrend: number
  activeCustomerTrend: number
  keyCustomerTrend: number
}

const props = defineProps<{
  stats: CustomerStats
}>()
</script>

<style scoped>
.stats-row {
  margin-bottom: 20px;
}
</style>